<template>
  <div class="list">
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
    <van-card
      v-for="(it, i) in list"
      :key="i"
      :desc="it.createTime"
      :title="it.description"
      :thumb="it.image"
    />
    </van-list>
  </div>
</template>
<script>
import { ref } from '@vue/reactivity'
import request from '@utils/request'

export default {
  props: ['status'],
  setup (props) {
    console.log(props)
    const count = ref(1)
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)

    const onLoad = () => {
      request.post('/photo/list', {
        pageSize: 20,
        pageNum: count.value,
        status: props.status
      }).then(resp => {
        console.log(resp)
        list.value = list.value.concat(resp.rows.map(col => {
          return {
            ...col,
            image: col.images ? col.images.split(',')[0] : ''
          }
        }))
        count.value++
        loading.value = false
        if (resp.rows.length <= 0) finished.value = true
      })
    }
    return {
      list,
      onLoad,
      loading,
      finished
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  :deep(.van-card__title) {
    color: #333;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    height: 36px;
    max-height: 36px;
    margin-bottom: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
